/*
*  轮播图特效
*/
(function(){
    //获取元素
    let list = document.getElementById("carousel-list"); 
    let leftBtn = document.getElementById("leftbtn"); 
    let rightBtn = document.getElementById("rightbtn"); 
    let circles = document.getElementById("circles");
    let circlesList = circles.getElementsByTagName("li");
    let banner = document.getElementById("banner");
    //克隆第一张li
    let cloneLi = list.firstElementChild.cloneNode(true);
    //上树
    list.appendChild(cloneLi);
    //当前正在显示的图片序号，从0开始
    let idx = 0;

    //节流锁
    let lock = true;

    //右按钮
    rightBtn.onclick = right_btn_handler;

    //右按钮的事件处理函数
    function right_btn_handler(){
        //判断节流锁的状态，如果是关的，那么就什么都不做
        if(!lock) return;
        lock = false;
        idx++
        list.style.transition = "transform .5s ease";
        list.style.transform = `translateX(-${16.666 * idx}%)`;
        //判断是否是最后一张，如果是最后一张，那么就瞬间移动回来
        if(idx > 4){
            setTimeout(function(){
                //去掉过度
                list.style.transition = "none";
                //删除transform属性
                list.style.transform = "none";
                //全局图片序号变为0
                idx = 0;
            },500)
        }
        serCircles();
        //开锁，动画结束之后开锁
        setTimeout(function(){
            lock = true;
        },0)
    };
    //左按钮
    leftBtn.onclick = function(){
          //判断节流锁的状态，如果是关的，那么就什么都不做
          if(!lock) return;
          lock = false;
        //左按钮很特殊，要先写if语句，而不是idx
        if (idx === 0) {
            //瞬间拉动到最后一张假图
            list.style.transition = "none";
            list.style.transform = `translateX(-${16.666 * 5}%)`;
            setTimeout(function(){
                //动画
                list.style.transition = "transform .5s ease";
                list.style.transform = `translateX(-${16.666 * 4}%)`;
                
            },0)
            //改变idx的值
            idx = 4;
        }else{
            idx--;
            list.style.transition = "transform .5s ease";
            list.style.transform = `translateX(-${16.666 * idx}%)`;
        }
        //设置小圆点
        serCircles();
        //开锁，动画结束之后开锁
        setTimeout(function(){
            lock = true;
        },0)
    }

    //设置小圆点的current在谁身上，序号为idx的小圆点才有current类名，其他的里都没有类名
    function serCircles(){
       for (let i = 0 ; i < circlesList.length ; i++){
           if (i == idx % 5) {
            circlesList[i].className = "current";
           }else{
            circlesList[i].className = "";
           }
       }
    }


    //事件委托,小圆点的监听
    circles.onclick = function(e){
        if (e.target.tagName.toLowerCase() == "li"){
            //得到里身上的data-n属性
            let n = e.target.getAttribute("data-n");
            //拉动
            idx = n;
            list.style.transform = `translateX(-${16.666 * idx}%)`;
            serCircles();
        }
    }

    //定时器，自动轮播
    let timer = setInterval(right_btn_handler, 3000);

    //鼠标进入，自动轮播暂停
    banner.onmouseenter = function(){
        clearInterval(timer); 
    }

    //鼠标离开，自动轮播开始
    banner.onmouseleave = function(){
        clearInterval(timer); 
        timer = setInterval(right_btn_handler, 3000);
    }
})();